<template>
  <div>
    <section class="single-portfolio background-white rounded padding-50 shadow-blue mt-0" id="content">
      <h1 class="archive-header">{{ articleName }}</h1>
      <ul class="list-inline portfolio-info mb-0 mt-4">
        <li class="list-inline-item"><i class="icon-user"></i>{{ articleAuthor }}</li>
        &nbsp;&nbsp;
        <li class="list-inline-item"><i class="icon-calendar"></i>{{ articleCreateTime }}</li>
      </ul>
      <transition name="el-fade-in">
        <div v-show='articleContent !== ""' v-html="articleContent">{{ articleContent }}</div>
      </transition>
    </section>
    <section_record_no></section_record_no>
  </div>

</template>

<script>

import {setArticleContentStyle} from "../../../public/static/js/article-content";
import section_record_no from '../home-scetions/section-record-no'

export default {
  name: "content_article",
  components: {
    section_record_no
  },
  data() {
    return {
      articleName: '',
      articleAuthor: '',
      articleCreateTime: '',
      articleContent: '',
    }
  },
  mounted() {
    document.title = 'Loading... - ExtraXue | Homepage'
    this.getArticleContent()
  },
  methods: {
    getArticleContent() {
      this.$get(this.$reurl + 'article_content?articleId=' + this.$route.query.articleId).then(res => {
        if (res.res_status === 200) {
          this.articleName = res.article_name
          this.articleAuthor = res.article_author
          this.articleContent = res.article_content
          this.articleCreateTime = res.article_create_time
          this.articleUpdateTime = res.article_update_time
          this.$nextTick(() => {
            setArticleContentStyle()
            document.title = this.articleName + ' - ExtraXue | Homepage'
          })
        } else {
          console.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>

/*github markdown css style*/
@import "../../static/css/github-md.css";
/* pygmentize -S manni -f html -a .codehilite > codehilite.css */
@import "../../static/css/codehilite.css";

pre {
  line-height: 0 !important;
}

p, blockquote, ul, ol, dl, li, table, pre {
  margin: 5px 0 !important;
}

.codehilite /deep/ .el-button.is-circle {
  padding: 5px;
}
</style>